<!--模板部分-->
<template>
  <div class="login">

    <el-form status-icon ref="formName" :model="form" :rules="rules" label-width="80px">

      <!--头像-->
      <img class="avatar" src="./../assets/avatar.jpg" alt="">

      <!--用户名-->
      <!--.native 修饰符，可以给元素的根元素绑定原生事件-->
      <el-form-item prop="username" label="用户名：" label-width="80px">
        <el-input @keyup.enter.native="login" placeholder="请输入账号" v-model="form.username"></el-input>
      </el-form-item>

      <!--密码-->
      <el-form-item prop="password" label="密码：">
        <el-input @keyup.enter.native="login" placeholder="请输入账密码" type="password" v-model="form.password"></el-input>
      </el-form-item>

      <!--按钮-->
      <el-form-item>
        <el-button @click="login" type="primary" style="margin-right: 80px">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<!--行为部分-->
<script>

export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      // 表单校验
      rules: {
        // blur 失去焦点时触发
        // change 值修改时触发
        username: [
          { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入账密码', trigger: ['blur', 'change'] },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },

    // 表单重置 =》 重置按钮
    resetForm () {
      this.$refs.formName.resetFields()
    },

    // 空校验 =》 登录按钮
    async login () {
      try {
        await this.$refs.formName.validate()
        const res = await this.$axios.post('login', this.form)
        const { meta, data } = res

        if (meta.status === 200) {
          this.$message({
            // 可手动关闭
            showClose: true,
            message: meta.msg,
            type: 'success',
            // 多少秒消失
            duration: 2000
          })
          localStorage.setItem('token', data.token)

          // 登录成功, 跳转首页
          this.$router.push({ path: '/index' })
        } else {
          // 给用户提示, 登录失败
          this.$message({
            // 可手动关闭
            showClose: true,
            message: meta.msg,
            type: 'error',
            duration: 2000
          })
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<!--样式部分-->
<style lang="less">

  .login {
    width: 100%;
    height: 100%;
    background-color: #002e4f;
    overflow: hidden;

    /*中间*/
    .el-form {
      width: 400px;
      background-color: #fff;
      padding: 70px 20px 20px;
      border-radius: 20px;
      margin: 200px auto 0px;
      position: relative;

      /*头像*/
      .avatar {
        position: absolute;
        top: -80px;
        left: 50%;
        border-radius: 50%;
        border: 5px solid #fff;
        /*水平垂直居中*/
        transform: translate(-50%);
      }
    }

  }

</style>
